<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="/css/index.css">
<style>

</style>

<body>
    <div id="app">
        <div class="iot">
            <router-link to="/add">去添加页面</router-link>
            <br>
            <router-link to="/">去首页</router-link>
        </div>

        <transition name="fade" mode="out-in" appear>
            <router-view></router-view>
        </transition>
    </div>

</body>
<template id="add">

    <div>
        <div class="addbox">
            <form class="ofrom" ref="f1" action="">
                <div class="addbox2">
                    <tbody>
                        <td>名字：</td>
                        <td><input v-model="objoo.name" name="name" type="text"></td>
                        <br />
                        <td>密码：</td>
                        <td><input v-model="objoo.password" name="password" type="password"></td>
                        <br>
                        <td>头像：</td>
                        <td><input ref="inp" @input="fn3" style="display: none;" name="avatar" type="file">
                            <div @click="fn2" class="tjia">

                                <img :src="url" alt="">
                            </div>

                        </td>
                        <br>
                        <td>性别：</td>
                        <td>
                            <input v-model="objoo.sex" name="sex" value="1" type="radio" id="sex"> <label for="sex">
                                男</label>
                            <input v-model="objoo.sex" name="sex" value="2" type="radio" id="sex2"> <label for="sex2">
                                女</label>
                        </td>
                        <br>
                        <td>班级：</td>
                        <select v-model="objoo.class" name="class">
                            <option value="1">大专班</option>
                            <option value="2">春季班</option>
                            <option value="3">秋季班</option>
                        </select>

                        <button @click.prevent="fn" style="margin-left: 50px; margin-top: 20px;">提交</button>

                    </tbody>
                </div>
            </form>
        </div>
    </div>
</template>



<template id="coma">
    <div>
        <table border="1px" rules="all">
            <thead>
                <tr>
                    <th>名字</th>
                    <th>id</th>
                    <th>头像</th>
                    <th>性别</th>
                    <th>状态</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="k,i in list">
                    <td>{{k.name}}</td>
                    <td>{{k.id}}</td>
                    <td>{{k.avatar?k.calss:'未知'}} <img v-if="k.avatar" :src="k.avatar" alt="">
                    </td>
                    <td>{{k.sex==0?'未知':k.sex==1?'男':'女'}}</td>
                    <td>{{k.state!=0?'正常':'封号'}}</td>
                    <td>{{k.calss?k.calss:'未知'}}</td>
                    <td>
                        <button @click="fnn2(i)">修改</button>
                        <br>
                        <button style="margin: 10px 0;" @click="fnn(i)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <transition name="fee" mode="out-in" appear>
            <div v-if="isshow" @click="isshow = false" class="make">
            </div>
        </transition>
        <transition name="fee" mode="out-in" appear>
            <div v-if="isshow" class="makebox">
                <add @yyy="isshow = false" :add="list[ioo]"></add>
            </div>
        </transition>
        <div class="butt">
            <button @click="fn2">上一页</button>
            <button @click="fn1">下一页</button>
        </div>
    </div>
</template>
<script src="/vue.js"></script>
<script src="/router.js"> </script>
<script>

    function ajax(options2, callback) {

        return new Promise((resolve, reject) => {
            var options = {
                url: "",
                methods: "get",
                ...options2

            }
            let { url, data, methods } = options


            if (methods.toLocaleLowerCase() == 'get') {
                var str = ""
                for (key in data) {
                    str = str + key + "=" + data[key] + "&"
                }
                url = url + "?" + str + 'time=' + Date.now()
            }
            let xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.response)
                    resolve(data)  // 发送成功了
                } else if (xhr.readyState == 4 && xhr.status != 200) {
                    //  如果发送给( xhr.readyState ==4)成功了 并且后端返回回来的状态不是  200
                    //  那么就代表失败了
                    reject(JSON.parse(xhr.response))
                }
            }
            xhr.open(methods, url)
            if (methods.toLocaleLowerCase() == 'post') {
                xhr.setRequestHeader('Content-Type', "application/json")


                xhr.send(JSON.stringify(data))
            } else {
                xhr.send()  // 需不需要携带参数 post请求需要携带 get 的话写url身上
            }

        })


    }
    function ajax2(options2) {

        return new Promise((resolve, reject) => {
            var options = {
                url: "",
                methods: "get",
                ...options2

            }
            let { url, data, methods } = options


            if (methods.toLocaleLowerCase() == 'get') {
                var str = ""
                for (key in data) {
                    str = str + key + "=" + data[key] + "&"
                }
                url = url + "?" + str + 'time=' + Date.now()
            }
            let xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.response)
                    resolve(data)  // 发送成功了
                } else if (xhr.readyState == 4 && xhr.status != 200) {
                    //  如果发送给( xhr.readyState ==4)成功了 并且后端返回回来的状态不是  200
                    //  那么就代表失败了
                    reject(JSON.parse(xhr.response))
                }
            }
            xhr.open(methods, url)
            if (methods.toLocaleLowerCase() == 'post') {



                xhr.send(data)
            } else {
                xhr.send()  // 需不需要携带参数 post请求需要携带 get 的话写url身上
            }

        })


    }

    // coma
    const coma = {
        template: '#coma',
        data() {
            return {
                isshow: false,
                ioo: -1,
                page: 1,
                size: 5,

                list: [
                    { name: 'dsf', id: 1, avatar: null, sex: 2, state: 0, calss: '春季班' },
                    { name: 'dsf', id: 1, avatar: null, sex: 2, state: 0, calss: '春季班' },
                    { name: 'dsf', id: 1, avatar: null, sex: 2, state: 0, calss: '春季班' },
                    { name: 'dsf', id: 1, avatar: null, sex: 2, state: 0, calss: '春季班' },
                ]
            }
        },
        created() {
            this.fn()
        },
        methods: {
            async fn() {
                let res = await ajax({
                    methods: 'post',
                    data: {
                        page: this.page,
                        size: this.size
                    },
                    url: '/ore'
                })
                this.list = res.data
            },
            fn1() {
                this.page++
                this.fn()
            },
            fn2() {
                if (this.page - 1) {
                    this.page--
                    this.fn()
                }

            },
            fnn(i) {
                ajax({
                    url: 'del',
                    methods: 'post',
                    data: this.list[i]
                })
                this.list.splice(i, 1)
            }
            , fnn2(i) {
                this.isshow = true
                this.ioo = i
            }
        },
    }

    const add = {
        template: '#add',
        props: ['add'],
        data() {
            return {
                url: '',
                objoo: {
                    name: '',
                    avatar: '',
                    sex: '',
                    state: '',
                    class: ''
                },
            }
        },
        methods: {
            fn() {
                let f1 = new FormData(this.$refs.f1)

                let pa = '/add'
                if (this.add) {
                    pa = '/xgai'
                    f1.append('id', this.add.id)
                    this.$emit('yyy')
                    location.reload()
                }


                ajax2({
                    url: pa,
                    methods: 'post',
                    data: f1
                })

            },
            fn2() {
                this.$refs.inp.click()
            },
            fn3() {
                let reader = new FileReader()
                reader.onload = () => {
                    this.url = reader.result
                }
                reader.readAsDataURL(this.$refs.inp.files[0])
            }

        },
        created() {
            if (this.add) {
                Object.assign(this.objoo, this.add)
                this.url = this.add.avatar
            }
        }
    }


    Vue.component('add', add)



    const routes = [
        //  coma路由    
        { path: '/', component: coma },
        { path: '/add', component: add }
    ]


    const router = new VueRouter({
        routes,
    })

    new Vue({
        el: '#app',
        router,
    })



</script>

</html>